<template>
  <div class="comm_header flex_hcneter_bet" v-if="tabList.length > 1">
    <div :class="[settings.sideTheme === 'theme-dark' ? 'xian' : 'xian1']"></div>
    <div class="title1">项目切换</div>
    <div class="flex_hcneter" >
      <div
      v-for="(item,index) in tabList"
      @click="tabClick(item)"
      :class="[
        settings.sideTheme === 'theme-dark' ? 'btns' : 'btns1',
        tabActive.value == item.value ? (settings.sideTheme === 'theme-dark' ? 'active_btn' : 'active_btn1') : '',
      ]"
      class=" flex_zhcenter ">{{item.label}}</div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex";
export default {
  data() {
    return {
      tabActive:{},//选中的平台类型
      tabList:[],
      tabList1:[
        {label:'汽车平台',value:1},
        {label:'电瓶车平台',value:2},
      ],
      userInfo:{},//用户信息
    };
  },
  computed: {
      ...mapState(["settings"]),
  },
  mounted() {
    let user = this.$store.state.user || {}
    let userInfo = user.userInfo || {}
    this.userInfo = {...userInfo}
    console.log('userInfo',userInfo)
    if(userInfo.operatorPlatformType) {
      let arr = userInfo.operatorPlatformType.split(',')
      this.tabList = this.tabList1.filter(item=>{
        return arr.some(i=>item.value == i)
      })
    }else{
      this.tabList = [...this.tabList1]
    }
    if(userInfo.operatorDefaultTab) {
      let index = this.tabList.findIndex(item=>item.value == userInfo.operatorDefaultTab)
      this.tabActive = index >= 0 ? this.tabList[index] : this.tabList[0]
    }else{
      this.tabActive = this.tabList[0] || {}
    }

    this.$emit('tabClick',this.tabActive)
  },
  methods: {
    tabClick(e){//tab点击
      this.tabActive = {...e}
      this.$emit('tabClick',e)
    },
  },
};
</script>

<style lang="scss">
.comm_header{
  position: relative;margin-bottom: 15px;
  .title,.title1{font-size: 24px;padding-left: 8px;font-weight: bold;}
  .xian,.xian1{width: 3px;height: 22px;position: absolute;left: 0;}
  .xian{background-color: #33D655;}
  .xian1{background-color: #FF9F15;}
  .btns,.btns1{
    width: 105px;height: 40px;border-radius: 20px;
    font-size: 14px;background-color: #fff;box-shadow: 0 0 4px #ccc;
    cursor: pointer;
    &:first-child{margin-right: 10px;}
  }
  .btns{color: #33D655;}
  .btns1{color: #FF9F15;}
  .active_btn{color: #fff;background-color: #33D655;box-shadow: 0 0 4px #33D655;}
  .active_btn1{color: #fff;background-color: #FF9F15;box-shadow: 0 0 4px #FF9F15;}
}
</style>
